<template>
  <el-container class="maker">
    <el-aside width="175px" class="elements-container">
      <div class="elements" v-if="elements">
        <div v-if="elements">
          <h5>组件</h5>
          <draggable
            tag="el-row"
            :list="elements"
            v-bind="left"
          >
            <el-col v-for="(item, index) in elements" :key="index" class="element-label" :span="24">
              <a>
                <i :class="icon(item)"></i>
                <span>{{ item.label }}</span>
              </a>
            </el-col>
          </draggable>
        </div>
      </div>
    </el-aside>
    <el-main>
      <el-row class="toolbar">
        <el-button size="small">导入</el-button>
        <el-button size="small" @click="show=true">配置</el-button>
        <el-button size="small" @click="download">导出</el-button>
      </el-row>
      <ym-maker-config v-model="form" :visible.sync="show"/>
      <el-row class="form-view">
        <el-col :span="24" class="form-view-content">
          <el-form v-bind="form" :style="style">
            <Ym-maker-fields v-model="form.fields" :drag="right"/>
          </el-form>
        </el-col>
      </el-row>
      <el-dialog :visible.sync="dialog">
        <div @dblclick.prevent.stop="edit=!edit">
          <el-input type="textarea" v-model="code" v-if="edit" autosize/>
          <ym-highlight :code="code" language="javascript" v-else/>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import Draggable from 'vuedraggable'
import { WIDTH } from "@/store/form";
import { ICON } from "@/store/elementui"
import YmMakerFields from "@/ym/maker/YmMakerFields"
import YmMakerConfig from "@/ym/maker/YmMakerConfig"
import YmHighlight from "@/ym/components/YmHighlight";

export default {
  props: {
    elements: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const vm = this
    return {
      // 表单域选项列表
      left: {
        group:{
          // 拖曳分组
          name:'element',
          // 可拖出及效果
          pull:'clone',
          // 可拖入
          put:false
        },
        // 可拖曳排序
        sort:false,
        // 影子样式
        ghostClass: 'ghost'
      },
      // 表单可视化部分
      right: {
        group:{
          // 拖曳分组
          name: 'element',
          // 可拖出及效果
          pull: true,
          // 可拖入
          put: true
        },
        // 可拖曳排序
        sort:true,
        // 影子样式
        ghostClass: 'ghost',
        animation: 200,
        // forceFallback: true
      },

      // 配置面板显示
      show: false,

      // 表单配置
      form: vm.value,

      dialog: false,
      edit: false
    }
  },
  created() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    }
  },
  computed: {
    style () {
      const width = this.form[WIDTH]
      return (width) ? {
        width
      } : {}
    },
    code: {
      get () {
        return JSON.stringify(this.form, null, '\t')
      },
      set (v) {
        const v_ = JSON.parse(v)
        if (v_) this.form = v_
      }
    }
  },
  components: {
    Draggable,
    YmMakerFields,
    YmMakerConfig,
    YmHighlight
  },
  methods: {
    download () {
      this.dialog = true
    },
    icon (item) {
      return 'icon ' + item[ICON]
    }
  }
}
</script>

<style scoped lang="less">
@primary-color: #409EFF;
@primary-background-color: #ecf5ff;

.maker {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: relative;

  .elements {
    background-color: #ffffff;
    height: 100%;
    border-right: #e9e9e9 solid 1px;

    h5 {
      padding: 8px 12px;
    }

    ul{
      position: relative;
      overflow: hidden;
      padding: 0 10px 10px;
      margin: 0;
    }

    .element-label {
      font-size: 12px;
      display: block;
      width: 90%;
      line-height: 26px;
      position: relative;
      float: left;
      left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      color: #333;
      border: 1px solid #F4F6FC;

      &:hover{
        color: @primary-color;
        border: 1px dashed @primary-color;
      }

      &>a{
        display: block;
        cursor: move;
        background: #F4F6FC;
        border: 1px solid #F4F6FC;

        .icon{
          margin-right: 6px;
          margin-left: 8px;
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
        }

        span{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }

  .toolbar {
    margin-bottom: 10px;
  }

  /**
    拖拽幽灵
  */
  .ghost {
    border: #a71d5d 1px dashed;
    list-style-type:none;
    padding: 5px;
  }
}
</style>

